<template>
  <div class="account">
    <el-tabs type="border-card">
      <el-tab-pane label="基本信息">
        <div class="content1">
          <p class="font">头像</p>
          <div class="conPic">
            <div class="picFace">
              <el-avatar :size="60" :src="userInfo.face" />
            </div>
            <div class="picBody">
              <el-upload
                class="upload-demo"
                :action="
                  'http://120.46.193.113:7011/reception/upimg?id=' + userId
                "
                multiple
                :on-success="upload"
                :on-error="uploadError"
                :limit="3"
              >
                <el-button>点击上传</el-button></el-upload
              >

              <p class="picFont">只能上传jpg/png文件，且不超过1MB</p>
            </div>
          </div>
          <div class="conMsgRows">
            <div class="Rows">
              <p>昵称</p>
              <div>
                <span>{{ userInfo.username }}</span>
                <span
                  @click="editUserInfo({ status: false, title: '昵称' })"
                  class="upMsg"
                  >更改</span
                >
              </div>
            </div>
            <div class="Rows">
              <p>手机号</p>
              <div>
                <span>{{ userInfo.phone }}</span>
                <span
                  @click="editUserInfo({ status: true, title: '新手机号' })"
                  class="upMsg"
                  >更改</span
                >
              </div>
            </div>
            <div class="Rows">
              <p>邮箱</p>
              <div v-if="userInfo.email">
                <span>{{ userInfo.email }}</span>
                <span
                  class="upMsg"
                  @click="editUserInfo({ status: true, title: '邮箱' })"
                  >更改</span
                >
              </div>
              <div v-else>
                <span>未绑定</span>
                <span
                  class="upMsg"
                  @click="editUserInfo({ status: true, title: '邮箱' })"
                  >绑定</span
                >
              </div>
            </div>
            <div class="Rows">
              <p>密码</p>
              <div>
                <span>已设置，可通过账户密码登录</span>
                <span
                  class="upMsg"
                  @click="editUserInfo({ status: true, title: '修改密码' })"
                  >更改</span
                >
              </div>
            </div>
            <div class="Rows">
              <p>微信</p>
              <div>
                <span style="color: #fff; background-color: #fff">
                  <el-avatar
                    :size="20"
                    src="../../../public/Sence-pic/u878.png"
                  />
                </span>
                <span class="upMsg">更改</span>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="认证信息">
        <a-alert
          message="实名认证申请提交后，工作人员将24小时内审核完成。"
          type="info"
          show-icon
        />
        <div style="height: 50px"></div>
        <div class="EmpMsg">
          <a-empty
            image="../../../public/images/u3291.png"
            :image-style="{
              height: '177px',
            }"
          >
            <template #description>
              <span> 实名认证成功后，将免费获得5次存证机会 </span>
            </template>
            <div class="infoMsg">
              <a-steps>
                <a-step title="填写信息" />
                <a-step title="信息审核" />
                <a-step title="审核通过" />
              </a-steps>
              <div class="empty"></div>
              <div class="InfoBut">
                <el-button type="primary" @click="BitChkPerson"
                  >个人实名认证</el-button
                >
                <el-button @click="BitChkEnter">企业实名认证</el-button>
              </div>
            </div>
          </a-empty>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 显示手机验证码的弹框 -->
    <el-dialog
      v-model="dialogVisible"
      title="身份验证"
      width="40%"
      top="15%"
      @close="closeDialogVisible"
      :destroy-on-close="true"
    >
      <div class="title" :style="{ margin: '10px 0' }">
        <span>为了你的账户安全，请验证身份。验证成功后进行下一步操作。</span>
      </div>
      <div class="editPwdBox">
        <div class="item">
          <label for="">手机号</label>
          <el-input
            v-model="editForm.phone"
            class="w-50 m-2"
            :style="{ margin: '0 10px', width: '230px' }"
            placeholder="请输入手机号"
          />
          <el-button
            type="primary"
            :disabled="editForm.phone ? false : true"
            @click="findPwdGetPhoneCode($event)"
            >获取验证码</el-button
          >
        </div>
        <div class="item">
          <label for="">验证码</label>
          <el-input
            v-model="editForm.code"
            class="w-50 m-2"
            :disabled="codeInputStatus"
            :style="{ margin: '0 10px', width: '230px' }"
            placeholder="请输入验证码"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            :disabled="editForm.code ? false : true"
            type="primary"
            @click="validate"
          >
            验证
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改信息的弹出框 -->
    <el-dialog
      v-model="editUserInfodialogVisible"
      :title="editTitle"
      width="40%"
      top="15%"
      @close="closeDialogVisible"
      :destroy-on-close="true"
    >
      <div class="editPwdBox">
        <div class="item">
          <label for="">{{ editTitle }}：</label>
          <el-input
            v-model="editUserInfoForm.info"
            class="w-50 m-2"
            :style="{ margin: '0 10px', width: '230px' }"
            :placeholder="'请输入' + editTitle"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editUserInfodialogVisible = false">取消</el-button>
          <el-button
            :disabled="editUserInfoForm.info ? false : true"
            type="primary"
            @click="editTrue"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script   setup>
import axios from "axios";
import "ant-design-vue/dist/antd.css";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import "ant-design-vue/dist/antd.css";
import { useRouter } from "vue-router";
const router = useRouter();
const BitChkPerson = () => {
  router.push("/console/certified");
};
const BitChkEnter = () => {
  router.push("/console/enterprise");
};
const store = useStore();
// 当前用户的id
const userId = ref(0);
// 当前用户的信息
const userInfo = ref({});
// 控制验证用户身份的弹出框
const dialogVisible = ref(false);
// 控制修改用户信息的弹出框
const editUserInfodialogVisible = ref(false);
// 修改的form表单
const editForm = ref({
  phone: "",
  code: "",
});
const editUserInfoForm = ref({
  _id: "",
  info: "",
});
// 输入验证码的input框 未获取时不能输入
const codeInputStatus = ref(true);
//修改用户信息 弹出框的表头
const editTitle = ref("");
let timer = ref(60);
onMounted(() => {
  getStoreUserId();
  getUser();
});
// 从store获取用户id
const getStoreUserId = () => {
  userId.value = store.state.userInfo.id;
};
// 获取用户信息
const getUser = async () => {
  let { data } = await axios.get("/api/reception/getuser", {
    params: { id: userId.value },
  });
  userInfo.value = data.data[0];
};
//修改用户信息
const editUserInfo = (obj) => {
  editTitle.value = obj.title;
  if (obj.status) {
    dialogVisible.value = true;
  } else {
    editUserInfodialogVisible.value = true;
  }
};
// 关闭时的回调
const closeDialogVisible = () => {
  editUserInfoForm.value = {};
  editForm.value = {};
  codeInputStatus.value = true
};
// 获取验证码按钮点击事件
const findPwdGetPhoneCode = (event) => {
  let phone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (!phone.test(editForm.value.phone))
    return ElMessage({ type: "error", message: "手机格式不正确！" });
  if (timer.value != 60) return;
  let a = undefined;
  a = setInterval(() => {
    if (timer.value <= 0) {
      clearInterval(a);
      event.target.innerHTML = "获取验证码";
    }
    timer.value--;
    event.target.innerHTML = "还剩" + timer.value + "秒";
  }, 1000);
  ElMessage({ type: "success", message: "发送成功！请注意查收！" });
  codeInputStatus.value = false;
};
// 验证成功的按钮点击事件
const validate = () => {
  dialogVisible.value = false;
  editUserInfodialogVisible.value = true;
};
// 修改用户信息的按钮点击事件
const editTrue = async () => {
  editUserInfoForm.value._id = userInfo.value._id;
  if (editTitle.value == "昵称") {
    if (!editUserInfoForm.value.info)
      return ElMessage({ type: "error", message: "昵称不能为空！" });
    editUserInfoForm.value.userName = editUserInfoForm.value.info;
  } else if (editTitle.value == "新手机号") {
    let phone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
    if (!phone.test(editUserInfoForm.value.info))
      return ElMessage({ type: "error", message: "手机格式不正确！" });
    editUserInfoForm.value.phone = editUserInfoForm.value.info;
  } else if (editTitle.value == "邮箱") {
    let email = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if (!email.test(editUserInfoForm.value.info))
      return ElMessage({ type: "error", message: "邮箱格式不正确！" });
    editUserInfoForm.value.email = editUserInfoForm.value.info;
  } else if (editTitle == "修改密码") {
    if (!editUserInfoForm.value.info)
      return ElMessage({ type: "error", message: "密码不能为空！" });
    editUserInfoForm.value.password = editUserInfoForm.value.info;
  }
  let { data } = await axios.post(
    "/api/reception/edituser",
    editUserInfoForm.value
  );
  if (data.code == 200) {
    ElMessage({ type: "success", message: "修改成功！" });
    getUser();
  } else {
    ElMessage({ type: "success", message: "修改失败！" });
  }

  editUserInfodialogVisible.value = false;
};

// 用户上传头像回调
const upload = (a) => {
  console.log(a);
};
// 上传失败的回调
const uploadError = () => {
  console.log(2222);
};
</script>

<style scoped>
.item {
  margin: 10px 0;
}
.account {
  height: calc(100% - 65px);
  padding: 45px 50px;
}

.font {
  font-family: "Microsoft YaHei UI";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #606266;
}

.picFont {
  font-family: "Microsoft YaHei UI";
  font-weight: 400;
  font-style: normal;
  font-size: 10px;
  color: #909399;
  margin-top: 10px;
}

.content1 {
  padding: 20px;
}

.conPic {
  display: flex;
  margin-top: 15px;
}

.Rows p {
  margin-bottom: 0 !important;
}

.picFace {
  width: 8%;
  vertical-align: middle;
}

.picBody {
  width: 92%;
  vertical-align: middle;
}

.Rows {
  font-family: "Microsoft YaHei UI";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  width: 97%;
  height: 63px;
  border: 1px solid #ebeef5;
  padding-left: 18px;
  padding-right: 15px;
}

.Rows p {
  line-height: 35px;
}

.upMsg {
  float: right;
  color: #409eff;
}
.upMsg:hover {
  cursor: pointer;
}

.conMsgRows {
  margin-top: 40px;
}
.infoMsg {
  width: 50%;
  margin: auto;
}
.InfoBut {
  width: 50%;
  margin: auto;
}
.empty {
  height: 50px;
}
</style>